<template>
  <el-card class="box-card" style="height: calc(100vh - 120px)">
    <div slot="header" class="clearfix">
      <span>{{customForm.communityName}}</span>
    </div>
    <div>
      <div class="text-center">
        <el-avatar :size="120" :src="customForm.customHeadImg|splitImgSrcFirst"></el-avatar>
      </div>
      <ul class="list-group list-group-striped">
        <li class="list-group-item">
          <svg-icon icon-class="user"/>
          客户名称
          <div class="pull-right" >{{customForm.customName}}</div>
        </li>
        <li class="list-group-item">
          <svg-icon icon-class="list"/>
          客户类型
          <div class="pull-right">{{customForm.customType?dict.label.custom_type[customForm.customType]:''}}</div>
        </li>
        <li class="list-group-item">
          <svg-icon icon-class="phone"/>
          手机号码
          <div class="pull-right">{{customForm.cellPhoneNumber }}</div>
        </li>
        <li class="list-group-item">
          <svg-icon icon-class="idCard"/>
          身份证号
          <div class="pull-right">{{customForm.idCard }}</div>
        </li>
        <li class="list-group-item">
          <svg-icon icon-class="peoples"/>
          性别
          <div class="pull-right">{{customForm.sex?dict.label.sys_user_sex[customForm.sex]:''}}</div>
        </li>
      </ul>
    </div>
  </el-card>
</template>

<script>
  export default {
    name: "customInfoItem",
    dicts:[ 'custom_type','sys_user_sex' ],
    data(){
      return {
      }
    },
    methods:{

    },
    props: {
      customForm: {
        type: Object,
        default: () => {
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  ::v-deep .el-avatar > img{
    width: 100%;
  }
  ::v-deep .list-group-item{
    padding: 15px 0px;
  }
</style>
